<template>
	<view class="wrap">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view v-for="art in recordList" :key="art.id" class="art-item">
				<view v-if="art.photos.length==0" class="art0" @click="gotoArticle(art.id)">
					<text class="title">{{ art.title }}</text>
				</view>
				<view v-else-if="art.photos.length==1" class="art1" @click="gotoArticle(art.id)">
					<view class="photo-box">
						<u--image :showLoading="true" :src="art.photos" width="240rpx" height="150rpx"></u--image>
					</view>
					<text class="title">{{ art.title }}</text>
				</view>
				<view v-else class="art2" @click="gotoArticle(art.id)">
					<text class="title">{{ art.title }}</text>
					<view class="photo-box">
						<u-album :urls="art.photos" multiple-size="226rpx" 
							:previewFullImage="false"
							space="12rpx"
						></u-album>
					</view>
				</view>			
			</view>
		</mescroll-body>	
		
		<x-tabbar currentTab="discover" :cartItemNum="cartProductNum"></x-tabbar>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";	
import XTabbar from "@/components/XTabbar.vue";
import { cartItemNum } from "@/api/cart.js";
import { discoverList } from "@/api/discover.js";
	
export default {
	mixins: [MescrollMixin],
	components: {
		XTabbar
	},
	onShow() {
		this.getCartItemNum();
	},
	data() {
		return {
			cartProductNum: 0,
			queryParams: {},
			recordList: []
		}
	},
	methods: {
		upCallback(page) {
			console.log("上拉加载");
			this.queryParams.pageSize = page.size;
			this.queryParams.page = page.num;
			discoverList(this.queryParams).then(res=>{
				// 第一页手动置空列表
				if(page.num == 1) {
					this.recordList = [];	
				}
				
				this.recordList = this.recordList.concat(res.data.recordList); 
				this.mescroll.endBySize(res.data.recordList.length, res.data.totalRow);
			});
		},
		getCartItemNum() {
			if(this.isLogin()) {
				cartItemNum().then(res=>{
					this.cartProductNum = res.data.num;
				});
			}
		},
		gotoArticle(id) {
			uni.navigateTo({
				url: '/pages/discover/article?id=' + id
			});	
		}
	}
}	
</script>

<style lang="less" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	padding: 0 24rpx;
	box-sizing: border-box;
	height: 100vh;
}

.art-item {
	display: flex;
	flex-direction: column;
	padding: 24rpx 0;
	border-bottom: 1px solid #f4f4f4;
}

.art-item:last-child {
	border: 0;
}

.art0 {
	.title {
		font-size: 16px;
		color: #303133;
	}
}
	
.art1 {
	display: flex;
	flex-direction: row;
	
	.photo-box {
		width: 280rpx;
		margin-right: 12rpx;
	}
	
	.title {
		font-size: 16px;
		color: #303133;
	}
	
}
	
.art2 {
	display: flex;
	flex-direction: column;
	
	.title {
		font-size: 16px;
		color: #303133;
	}
	
	.photo-box {
		margin-top: 12rpx;
	}
}	
		
</style>